<template>
	<div class="search">
		<slot name="one">
			<div class="title">
				<router-link to="add">
					<img src="../../public/arrow_left.png" alt="">
				</router-link>
				<p class="users">搜索地址</p>
			</div>
			<div class="con">
				<input type="text" placeholder="请输入小区/写字楼/学校等" v-model="keyword">
				<button @click="sure">确认</button>
			</div>
			
			<div class="li" v-for="(item,index) in qian" :key="index" v-show="s">
				<router-link :to="'/add?' + 'name=' + item.name">
					<h4 class="nam">{{item.name}}</h4>
					<p>{{item.address}}</p>
				</router-link>
			</div>
			<div class="p" v-show="p">
				<p>为了满足商家的送餐要求,建议您从列表中选择地址</p>
			</div>
			<div class="q" v-show="sd">
				<p>找不到地址?</p>
				<p>请尝试输入小区、写字楼或学校名</p>
				<p>详细地址(如门牌号)可稍后输入哦</p>
			</div>
		</slot>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				p:true,
				sd: true,
				city_id :'',
				keyword:'',
				type:'',
				qian:[],
				s:false
			}
		},
		methods: {
			sure() {
				let obj = this;
				let cid = JSON.parse(localStorage.cityId)
				this.$axios({
					url: 'https://elm.cangdu.org/v1/pois?city_id='+cid+'&keyword='+obj.keyword+'&type=search',
					method: 'get'
				}).then(res => {
					if (res.data) {
						obj.qian=res.data
						obj.sd = false
						obj.p = false;
						obj.s = true
					}else if (!res.data) {
						obj.sd = true
						obj.p = true;
						obj.s = false
					}
				})
			},
			hui(){
				window.console.log(this.qian.name)
			}
		},
	}
</script>

<style scoped>
	.li{
		width: 292px;
		/* height: 68px; */
		margin: 0 auto;
		background-color: white
	}
	.nam {
		font-size: 15px;
		color: #555555;
		padding-top: 14px;
	}
	.li p {
		font-size: 13px;
		color: #999999;
		padding-bottom: 14px;
	}
	.search {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	.title {
		width: 100%;
		height: 39px;
		background-color: #007AFF;
		line-height: 39px;
		text-align: center;
	}

	.title img {
		width: 30px;
		height: 35px;
		float: left;
		margin-left: 10px;
		margin-top: 5px;
	}

	.users {
		font-size: 16px;
		color: white;
	}

	.con {
		width: 320px;
		height: 54px;
		background-color: #FFFFFF;
		position: relative;
		line-height: 54px;
	}

	.con input {
		width: 236px;
		height: 34px;
		background-color: #F2F2F2;
		border: 1px solid gainsboro;
		outline: none;
		border-radius: 5px;
		position: absolute;
		left: 8px;
		top: 5px;
		text-indent: 10px;
	}

	.con button {
		width: 60px;
		height: 34px;
		position: absolute;
		top: 5px;
		right: 5px;
		background-color: #3199E8;
		font-size: 14px;
		color: white;
		border-radius: 5px;
		border: none;
		line-height: 34px;
	}

	.p {
		width: 320px;
		height: 24px;
		background-color: #FFF6E4;
		color: #FF883F;
		font-size: 12.4px;
	}

	.p p {
		padding: 4px;
		text-indent: 10px;
	}

	.q {
		width: 320px;
		height: 50px;
		margin: 150px auto;
		font-size: 14px;
		color: #969696;
		text-align: center;
		background-color: white
	}

	.q p {
		margin-top: 10px;
	}
</style>
